<script setup lang="ts">
import type { Ref } from 'vue';
import { myadvice } from '@/api/myadvice'
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user'
const useStore = useUserStore()

const router = useRouter()
// 导航栏返回事件
function onClickLeft() {
    router.back()
}

interface IAdvice {
    age:string
    doc:string
    id:number
    kinds:string
    name:string
    number:number
    position:string
    tit:number
}

const advice: Ref<IAdvice[]> = ref([])
onMounted(() => {
    myadvice({ tel: useStore.username || '' }).then(res => {
        // console.log(res)
        advice.value = res.data.data
    })
})
</script>

<template>
    <van-nav-bar title="我的咨询" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="boxset">
        <!-- 导航栏 -->

        <section>
            <ul>
                <li v-for="item in advice" :key="item.id">
                    <div>
                        <span class="name">{{item.name}}先生</span>
                        <span>{{item.age==='0'?'女':'男'}}|{{item.number}}岁</span>
                        <span class="tit" v-if='item.tit'>咨询结束</span>
                        <span class="tie" v-else>咨询中</span>
                    </div>
                    <div>
                        咨询医生:{{item.doc}}医生&nbsp;{{ item.position }}&nbsp;{{ item.kinds }}
                    </div>
                </li>
            </ul>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.van-nav-bar {
  background-color: #f7fdff;
}
.boxset {
    display: flex;
    flex-direction: column;

    overflow: auto;
    section {
        flex: 1;
    }
}

ul>li {
    height: 80px;
    width: 350px;
    background-color: whitesmoke;
    border-radius: 20px;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    div {
        font-size: 14px;
        color: gray;
        margin-left: 20px;
        margin-right: 20px;
        position: relative;

        .name {
            font-weight: 700;
            color: black;
            font-size: 18px;
        }

        .tit {
            position: absolute;
            right: 0px;
        }

        .tie {
            position: absolute;
            right: 0px;
            font-size: 16px;
            color: #0379ff;
        }
    }
}
</style>